<template>
	<view v-show = "show==true" class="" style="min-height: 400rpx;">
		<view class="tn-margin-sm">
			<view class="tn-text-lg tn-text-bold clamp-text-1 tn-text-justify">
				<text class="">我的分值 / 总分</text>
			</view>
		</view>
          <qiun-data-charts canvas2d type="arcbar" :opts="chargeOpts" :chartData="chargeChartData" />
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				show:false,
				
				chargeChartData: {},
				chargeOpts: {
				  color: ["#4B98FE","#00D05E","#FFAC00","#FB6A67","#957BFE","#00B9FE","#FE871B","#00C8B0","#F674D6"],
				  padding: undefined,
				  title: {
				    name: "92.65%",
				    fontSize: 20,
				    color: "#5F7E8B"
				  },
				  subtitle: {
				    name: "分值 / 总分",
				    fontSize: 12,
				    color: "#78909C",
				    offsetY: 6
				  },
				  extra: {
				    arcbar: {
				      type: "default",
				      width: 8,
				      backgroundColor: "#F8F7F8",
				      startAngle: 0.75,
				      endAngle: 0.25,
				      gap: 2,
				    }
				  }
				},


			}
		},
		props: {

		},

		methods: {
			drawAbilityCharts(info) {
				
				var pro = 0
				
				
				if (info.resultModel.records_max == ''){
					this.show = false;
				} else {
					this.show = true;
				}
				
				if (info.resultModel.records_max && info.resultModel.records_max != 0){
					pro =  info.resultModel.records_info * 1.0  / info.resultModel.records_max;
				}
				
				
				
				let res = {
				    series: [
				      {
				        name: "分值 / 总分",
				        color: "#82B2FF",
				        data: pro,
				      }
				    ]
				  };
				this.chargeOpts.title.name = info.resultModel.records_info;
				this.chargeChartData = JSON.parse(JSON.stringify(res));
			},



		}
	}
</script>

<style lang='scss' scoped>

</style>